import { reactive, toRaw, toRefs, ref, defineComponent, Fragment, computed } from 'vue'
import { useForm } from '@ant-design-vue/use'
import PropTypes from 'ant-design-vue/es/_util/vue-types'
import {
  UserOutlined,
  LockOutlined,
  AlipayCircleOutlined,
  TaobaoCircleOutlined,
  WeiboCircleOutlined,
  MailOutlined,
} from '@ant-design/icons-vue'
import { pattern } from '@/utils/validate'
// import { Form, FormItem, Input } from 'ant-design-vue'
import SmsCode from './SmsCode'
import './style.less'

export const styleDefine = {
  fontSize: '24px',
  color: 'rgba(0, 0, 0, 0.2)',
  marginLeft: '16px',
  verticalalign: 'middle',
  cursor: 'pointer',
  transition: 'color 0.3s',
}

export const accoutProps = {
  loginType: PropTypes.number.def(1),
}

const accoutLogin = defineComponent({
  name: 'account-login',
  props: accoutProps,
  setup(props, context) {
    const modelRef1 = reactive({
      username: ref(''),
      password: ref('')
    })

    const modelRef2 = reactive({
      mobile: ref(''),
      captcha: ref(''),
    })

    const state = reactive({
      loginBtn: false,
      checked: false,
    })

    const rulesRef1 = reactive({
      username: [
        {
          required: true,
          message: '请输入帐户',
          trigger: 'change',
        },
      ],
      password: [
        {
          required: true,
          message: '请输入密码',
          trigger: 'blur',
        },
      ]
    })

    const rulesRef2 = reactive({
      mobile: [
        {
          required: true,
          pattern: pattern.mobile,
          message: '请输入正确的手机号',
          trigger: 'change',
        },
      ],
      captcha: [
        {
          required: true,
          message: '请输入验证码',
          trigger: 'blur',
        },
      ],
    })

    const rulesRef = props.loginType == 1 ? rulesRef1 : rulesRef2

    const modelRef = props.loginType == 1 ? modelRef1 : modelRef2

    const { validate, validateInfos } = useForm(modelRef, rulesRef)

    const checkChange = (ev) => {
      state.checked = ev.target.checked
    }

    const userInputChange = (ev) => {
      if (props.loginType == 1) {
        modelRef.username = ev.target.value
      } else {
        modelRef.mobile = ev.target.value
      }
    }

    const pswInputChange = (ev) => {
      if (props.loginType == 1) {
        modelRef.password = ev.target.value
      } else {
        modelRef.captcha = ev.target.value
      }
    }

    const onSubmit = (e) => {
      e.preventDefault()

      state.loginBtn = true

      validate()
        .then(() => {
          console.log('success', toRaw(modelRef))
          setTimeout(() => {
            state.loginBtn = false
          }, 600)
        })
        .catch((err) => {
          state.loginBtn = false
          console.log('error', toRaw(modelRef))
        })
    }

    return {
      wrapperCol: { span: 24 },
      state,
      validateInfos,
      modelRef,
      rulesRef,
      onSubmit,
      checkChange,
      userInputChange,
      pswInputChange,
    }
  },
  methods: {
    validataFun() {
      new Promise((response, reject) => {
        validate()
          .then(() => {
            return response()
          })
          .catch((err) => {
            return reject(err)
          })
      })
    },
  },
  render() {
    const {
      wrapperCol,
      validateInfos,
      modelRef,
      rulesRef,
      onSubmit,
      state,
      checkChange,
      userInputChange,
      pswInputChange,
    } = this
    const { loginType } = this.$props

    return (
      <Fragment>
        <a-form class='user-layout-login'>
          <a-form-item
            wrapperCol={wrapperCol}
            {...(loginType == 1 ? { ...validateInfos.username } : { ...validateInfos.mobile })}
          >
            {loginType == 1 ? (
              <a-input
                size='large'
                type='text'
                placeholder='账户: admin'
                v-model={modelRef.username}
                onChange={userInputChange}>
                <user-outlined type='user' slot='prefix' />
              </a-input>
            ) : (
              <a-input
                size='large'
                type='text'
                placeholder='手机号'
                v-model={modelRef.mobile}
                onChange={userInputChange}>
                <MobileOutlined slot='prefix' />
              </a-input>
            )}
          </a-form-item>
          <a-form-item
            wrapperCol={wrapperCol}
            {...(loginType == 1 ? { ...validateInfos.password } : { ...validateInfos.captcha })}
          >
            {loginType == 1 ? (
              <a-input-password size='large' placeholder='密码: admin or ant.design' onChange={pswInputChange}>
                <LockOutlined slot='prefix' style="{ color: 'rgba(0,0,0,.25)' }" />
              </a-input-password>
            ) : (
              <a-row gutter={16}>
                <a-col class='gutter-row' span={16}>
                  <a-input size='large' type='text' placeholder='验证码' onChange={pswInputChange}>
                    <MailOutlined style="{ color: 'rgba(0,0,0,.25)' }" slot='prefix' />
                  </a-input>
                </a-col>
                <a-col class='gutter-row' span={8}>
                  <SmsCode mobile={modelRef.mobile}></SmsCode>
                </a-col>
              </a-row>
            )}
          </a-form-item>
          <a-form-item wrapperCol={wrapperCol}>
            <a-checkbox checked={state.checked} onChange={checkChange}>
              自动登录
            </a-checkbox>
            <router-link to={{ name: 'recover', params: { user: 'aaa' } }} class='forge-password' style='float: right;'>
              忘记密码
            </router-link>
          </a-form-item>
          <a-form-item wrapperCol={wrapperCol}>
            <a-button
              size='large'
              type='primary'
              class='login-button'
              onClick={onSubmit}
              htmlType='submit'
              loading={state.loginBtn}
              disabled={state.loginBtn}>
              确定
            </a-button>
          </a-form-item>
          <div class='user-login-other'>
            <span>其他登录方式</span>
            <a>
              <AlipayCircleOutlined style={styleDefine} />
            </a>
            <a>
              <TaobaoCircleOutlined style={styleDefine} />
            </a>
            <a>
              <WeiboCircleOutlined style={styleDefine} />
            </a>
            <router-link class='register' to={{ name: 'register' }}>
              注册账户
            </router-link>
          </div>
        </a-form>
      </Fragment>
    )
  },
})

export default accoutLogin
